<!-- input二次封装 -->
<template>
  <div class="input-text">
    <el-input v-model="value" ref="refInput" v-bind="$attrs" placeholder="  ">
      <!--传递插槽-->
      <template v-for="(item, key, index) in $slots" :key="index" v-slot:[key]>
        <slot :name="key"></slot>
      </template>
    </el-input>
    <label for="email-input">{{ $attrs.placeholder }}</label>
  </div>
</template>

<script lang="tsx" setup>
import { onMounted, ref, useAttrs } from "vue";
import gsap from "gsap";
// defineOptions({
// name: ''
// })
const attrs = useAttrs();
onMounted(() => {
    console.log();
    
  const input = document
    .querySelector(".input-text")
    ?.querySelector(".el-input__inner");
  console.log(input);
  let tween = gsap.to("label", {
    duration: 0.15,
    top: "0",
    left: "15px",
    color: "#10a37f",
    fontSize: "16px",
    ease: "power1.out",
  });
  //   暂停
  tween.pause();
  input?.addEventListener("focus", () => {
    tween.play();
  });
  //   失去焦点

  input?.addEventListener("blur", () => {
    if (value.value == "") {
      tween.reverse();
    }
  });
});
const value = ref("");
</script>
<style lang="scss" scoped>
.input-text {
  position: relative;
  label {
    position: absolute;
    top: 50%;
    left: 30px;
    transform: translate(0, -50%);
    font-size: 22px;
    color: #636363;
    pointer-events: none;
    background: white;
    padding: 0 3px;
    // transition: all cubic-bezier(0.4, 0.2, 0.6, 1) 0.15s;
  }
  :deep(.el-input) {
    border: 1px solid #c2c8d0;
    width: 400px;
    height: 70px;

    border: none;
    font-size: 22px;
    transition: all 0.15s;
    .el-input__wrapper {
      padding: 0 30px;
      border-radius: 10px;
    }
    //   &:focus {
    //     border: 1px solid #10a37f;
    //     outline: none;

    //   }
  }
  //   :deep(.el-input__inner):focus {
  //     label {
  //       // transition: all 0.15s;
  //       position: absolute;
  //       top: -11px;
  //       left: 15px;
  //       font-size: 16px;
  //       color: #10a37f;
  //     }
  //   }
}
</style>
